<template>
	<view>
		<uNavbar title="大厅" leftIconColor="#211E38"></uNavbar>
		<view class="navbar flex_dq">
			<view class="navbar_box" v-for="(item,index) in navberlist" :key="item.type" @click="changeNav(item.type)">
				<text :class="item.type == types?'active':''">{{item.name}}</text>
			</view>
			<image class="fhss" src="../../static/icon/i_bss.png" @click="goSearch"></image>
		</view>

		<view class="screen flex_ld" >
			<view class="selsect flex_c"  v-if="types==2" @click="isSwitch = !isSwitch">
				<text>{{values}}</text>
				<image src="../../static/icon/i_xial.png" mode=""></image>
			</view>
			<text @click="showScreen = true ,isSwitch = false">筛选</text>
			<view class="shuaixuan flex_Z" v-show="isSwitch">
				<text v-for="(item,index) in downList" :key="index" @click="isSelect(item)">{{item.name}}</text>
			</view>
		</view>
		<view class="" v-if="types == 1">
			<view class="hall " v-for="(item,index) in hatchList"  :key="index" @click="goDetails(item.id,item.hatch_goods_pid)">
				<view class="hall_top flex_dq ">
					<view class="hall_top_l">
						<image :src="item.img" mode=""></image>
						<text class="hall_state" v-if="item.status == 1">{{item.buy_start_time}}</text>
						<text class="hall_state" v-if="item.status == 2&& item.stock>0">挂售中</text>
						<text class="hall_state" v-if="item.status == 3">已结束</text>
						<text class="hall_state" v-if="item.status==2 && item.stock==0">已售罄</text>

					</view>
					<view class="hall_top_r ">
						<view class=" flex_ld">
							<text>{{item.goods_name}}</text>
						</view>
						<view class=" flex_ld">
							<text>当前价格</text>
							<text>{{item.price}}</text>
						</view>
						<view class=" flex_ld">
							<text>孵化周期</text>
							<text>{{item.incubation_cycle}} 天</text>
						</view>
						<view class=" flex_ld">
							<text>孵化上限</text>
							<text>{{item.hold_max_num}} 份</text>
						</view>
					</view>
				</view>
				<view class="hall_top_b flex_ld">
					<text>挂单数量:{{item.stock}}</text>
					<view class=" flex_dq">
						<text>距离下轮拆配还有({{item.dismantling_day}})天</text>
						<u-icon name="arrow-right"  color="#ffffff" size="14"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 自由市场 -->
		<view class="commodity_box flex_Z" v-if="types==2">
			<view class="commodity ">
				<view class="commodity_sell flex_Z" v-for="(item,index) in hatchList" :key="index"  @click="goDetails2(item.id,item.goods_id)">
					<image :src="item.img" mode="aspectFill"></image>
					<text>{{item.goods_name}}</text>
					<view class="hang flex_dq">
						<view class="hang_l  flex_c">
							<text>挂单</text>
						</view>
						<text> x{{item.sotck}}</text>
					</view>
					<view class="sign_box flex_ld">
						<view class="money_a flex_dq">
							<image src="../../static/icon/i_money.png" mode=""></image>
							<text>{{item.price}}</text>
							<text style="font-size: 18rpx;margin-left: 4rpx;">起</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="commodity_box flex_Z" v-if="types==3">
			<view class="commodity ">
				<view class="commodity_sell flex_Z" v-for="(item,index) in proplist" :key="item.id"  @click="goDetails3(item.id,item.prop_id)">
					<image :src="item.img" mode="aspectFill"></image>
					<text>{{item.prop_name}}</text>
					<view class="hang flex_dq">
						<view class="hang_l  flex_c">
							<text>挂单</text>
						</view>
						<text> x{{item.sotck}}</text>
					</view>
					<view class="sign_box flex_ld">
						<view class="money_a flex_dq">
							<image src="../../static/icon/i_money.png" mode=""></image>
							<text>{{item.price}}</text>
							<text style="font-size: 18rpx;margin-left: 4rpx;">起</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<noDatas   v-if="types==3"  :xxxList="proplist"  :status="status"></noDatas>
		<!-- 暂无数据 / 加载更多 -->
		<noDatas   v-if="types==1||types==2"  :xxxList="hatchList"  :status="status"></noDatas>
		
		<u-popup :show="showScreen" @close="showScreen = false" bgColor="transparent" closeable>
			<view class="popup_type flex_ZC">
				<text>选择发行方</text>
				<view class="xuan flex_left">
					<text :class="item.id == brandId? 'actives':''" v-for="(item,index) in typeList" :key="index"
						@click="isType(item)">{{item.name}}</text>
				</view>
				<text class="submit" @click="isConfirm">确定</text>
			</view>
		</u-popup>
	</view>
</template>

<style>
	page {
		background: #211E38;
	}
</style>
<script>
	import {userRanking} from '../../api/index.js'
	import {marketGroup,brandAll,hatchMarketGroup,propmarketGroup} from "../../api/store.js";
	export default {
		data() {
			return {
				page: 1,
				size: 10,
				page2: 1,
				size2: 10,
				types: 1,
				search:'',
				brandId:'',//品牌id
				transfer:'',//暂存
				brandName:'',//筛选值
				values: '全部', //默认
				choiceType:'create_time desc', //筛选方式
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				status2: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				showScreen: false, //筛选弹窗
				isSwitch: false, //下拉弹窗
				navberlist: [{
						type: 1,
						name: '品牌孵化'
					},
					{
						type: 2,
						name: '交易市场'
					},
					{
						type: 3,
						name: '道具'
					},
				],
				typeList: [],
				downList: [{
						id: 1,
						name: '最新上架',
						type: 'create_time desc'
					},
					{
						id: 2,
						name: '价格升序',
						type: 'price asc'
					},
					{
						id: 3,
						name: '价格降序',
						type: 'price desc'
					},
				],
				hatchList:[],
				proplist:[]
			}
		},
		onLoad() {
	
		
			console.log(this.types)
			this.isBrandAll()
		},
		onShow() {
			// if(uni.getStorageSync("typess")){
			// 	this.types=uni.getStorageSync("typess")
			// 	// setTimeout(()=>{
			// 	// 	uni.removeStorageSync("typess")
			// 	// },1500)
			// }else{
			// 	this.types=1
			// }
			if(this.types == 1){
				this.initHatchList()
			}else{
				this.initList()
			}
			// if(this.types == 1){
			// 	this.initHatchList()
			// }else{
			// 	this.initList()
			// }
			
		},
		methods: {
			// 品牌方
			isBrandAll() {
				brandAll().then(res => {
					console.log(res)
					this.typeList = res.data
				})
			},
			// 初始化品牌孵化列表
			initHatchList() {
				console.log(this.brandId);
				let data = {
					page:this.page,
					keywords:this.search,
					brand_id:this.brandId, //发行方
					order_by:this.choiceType, //排序方式
				};
				hatchMarketGroup(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						let list = res.data;
						this.hatchList = this.page == 1 ? list : this.hatchList.concat(list);
						console.log(this.productList);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},
			// 初始化自由市场列表
			initList() {
				let data = {
					// keywords:this.search,
					page:this.page,
					brand_id:this.brandId, //发行方
					order_by:this.choiceType, //排序方式
				};
				marketGroup(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						let list = res.data.data;
						this.hatchList = this.page == 1 ? list : this.hatchList.concat(list);
						console.log(this.productList);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},
			getlist(){
				let data={
					keywords:this.search,
					page:this.page2
				}
				propmarketGroup(data).then(res=>{
					console.log(res);
					if (res.code == 1) {
						let list = res.data.data;
						this.proplist = this.page2 == 1 ? list : this.hatchList.concat(list);
						console.log(this.proplist);
						if (list.length < this.size2) this.status2 = 'nomore';
						else this.status2 = 'loading';
					}
				})
			},
			// 切换navbar
			changeNav(type) {
				console.log(type);
				this.types = type
				this.page == 1
				this.brandId = ''
				this.choiceType = ''
				this.hatchList = []
				
				// uni.setStorageSync("typess",this.types)
				if(type == 1){
					
					this.initHatchList()
				}
				if (type==2){
					this.initList()
				}
				if(type==3){
					this.getlist()
				}
			},
			// 下拉选择
			isSelect(e) {
				this.values = e.name
				this.choiceType = e.type
				this.isSwitch = false
				if(this.types == 1){
					this.initHatchList()
				}else{
					this.initList()
				}
			},
			goSearch(){
				uni.navigateTo({
					url:'/pagesMy/mallCenter/searchHall'   
				})
			},
			// 选下拉类型
			isType(item) {
				// console.log(item);
				this.brandId = item.id
				console.log(this.brandId);
			},
			// 确定
			isConfirm() {
				console.log(this.types);
				this.showScreen = false
				this.page=1
				if(this.types == 1){
					this.initHatchList()
				}else{
					this.initList()
				}
			},
			goDetails(id,pid){
				uni.navigateTo({
					url:'/pagesMy/mallCenter/incubationDetails?id=' + id + '&pid=' + pid
				})
			},
			// 商品详情
			goDetails2(id,goodsId){
				console.log(id);
				uni.navigateTo({
					url:'/pagesMy/mallCenter/freeMarketDetails?id=' + id + '&goodsId=' + goodsId
				})
			},
			goDetails3(id,goodsId){
				console.log(id);
				uni.navigateTo({
					url:'/pagesMy/mallCenter/propDetails?id=' + id + '&goodsId=' + goodsId
				})
			},
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('下拉刷新');
			let that = this;
			setTimeout(function() {
					that.page = 1
					that.hatchList = []
					if(that.types == 1){
						that.initHatchList()
					}else{
						that.initList()
					}
			}, 800);
		},
		//触底加载
		onReachBottom() {
			console.log('触底加载');
			if (this.status != 'nomore') {
				this.page = this.page + 1
				if(this.types == 1){
					this.initHatchList()
				}else{
					this.initList()
				}
			}
		}
	}
</script>

<style scoped>
	.navbar {
		position: relative;
		width: 690rpx;
		margin: 30rpx auto;
	}
	.fhss{
		position: absolute;
		top: 0;
		right: 20rpx;
		width:40rpx;
		height: 40rpx;
	}

	.navbar_box>text {
		font-size: 36rpx;
		color: #A6A5AF;
		margin-right: 42rpx;
	}

	.active {
		color: #ffffff !important;
	}

	.screen {
		position: relative;
		width: 100%;
		font-size: 30rpx;
		color: #ffffff;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #ffffff50;
	}


	.screen>text {
		width: 82rpx;
		height: 42rpx;
		line-height: 42rpx;
		text-align: center;
		background: #383366;
		font-size: 24rpx;
		color: #ffffff;
		border-radius: 8rpx;
	}

	.selsect {
		font-size: 24rpx;
		color: #ffffff;
		width: 170rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		border-radius: 20rpx;
		background: linear-gradient(270deg, #E62AE2 0%, #1216FD 100%);
	}

	.selsect>image {
		width: 24rpx;
		height: 18rpx;
		margin-left: 8rpx;
	}

	.shuaixuan {
		position: absolute;
		top: 66rpx;
		left: 30rpx;
		width: 164rpx;
		margin-top: 4rpx;
		z-index: 999;
	}

	.shuaixuan>text {
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #ffffff;
		background: #383366;
		padding-left: 32rpx;
		border-bottom: 1rpx solid #ffffff20;
	}
	
.hall{
		width: 690rpx;
		/* height: 320rpx; */
		background: #3C2F65;
		margin: 24rpx auto 40rpx;
		border-radius: 20rpx;
	}
	.mart{
		margin-top: 50rpx;
	}
	.hall_top{
		border-bottom: 1rpx dashed #D8D8D850;
	}
	.hall_top_l{
		position: relative;
		margin-top: 24rpx;
		margin: 28rpx;
	}
	.hall_state{
		position: absolute;
		top: 0;
		left: 0;
		font-size: 24rpx;
		color: #e1e1e1;
		padding: 4rpx 8rpx;
		/* background: rgba(255, 255, 255 0.1); */
		/* backdrop-filter: blur(1px) */
	}
	.hall_top_l>image{
		width: 178rpx;
		height: 178rpx;
		border-radius: 16rpx;
	}
	.hall_top_r{
		width: 430rpx;
		font-size: 26rpx;
		color: #ffffff;
	}
	.hall_top_r>view{
		margin: 10rpx 0;
	}
	.hall_top_b{
		color: #ffffff;
		font-size: 26rpx;
		padding: 28rpx 30rpx;
		/* background: pink; */
	}

	.popup_type {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100%;
		min-height: 800rpx;
		background: #211E38;
		border-radius: 48rpx 48rpx 0rpx 0rpx;
		padding-bottom: 50rpx;
	}

	.popup_type>text:nth-child(1) {
		width: 100%;
		font-size: 36rpx;
		color: #ffffff;
		margin-left: 30rpx;
		margin-top: 50rpx;
		text-align: center;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #ffffff30;
	}

	.xuan {
		width: 100%;
		margin: 50rpx 0 30rpx;
	}

	.xuan>text {
		min-width: 134rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		border-radius: 40rpx;
		color: #ffffff;
		font-size: 24rpx;
		margin-left: 30rpx;
		border: 1rpx solid #ffffff30;
		margin-top: 20rpx;
		padding: 0 10rpx;
	}

	.actives {
		border: 1rpx solid #8020EF !important;
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%) !important;
	}

	.submit {
		position: absolute;
		bottom: 50rpx;
		width: 690rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 36rpx;
		color: #ffffff;
		text-align: center;
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
		border-radius: 40rpx;
	}
	.commodity_box {
		width: 92%;
		margin: 50rpx auto 30rpx;
		position: relative;
	}
	
	.commodity {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		/* margin-top: 50rpx; */
	}
	
	.commodity {
		z-index: 9;
	}
	
	.commodity_sell {
		position: relative;
		width: 336rpx;
		background: #3C2F65;
		border: 2rpx solid rgba(130, 121, 227, 0.4);
		border-radius: 20rpx;
		padding-bottom: 20rpx;
		margin-bottom: 40rpx;
	}
	
	.commodity_sell>image {
		width: 100%;
		height: 382rpx;
		border-radius: 20rpx 20rpx 0 0;
	}
	
	.commodity_sell>text {
		margin: 16rpx;
		color: #ffffff;
		text-overflow:ellipsis;
		display:-webkit-box;
		-webkit-box-orient:vertical; 
		-webkit-line-clamp:2; 
		overflow:hidden; 
	}
	.hang{
		position: absolute;
		top: 30rpx;
		left: 0;
		background: #00000090;
		border-radius: 0rpx 38rpx 38rpx 0rpx;
		font-size: 22rpx;
		padding: 10rpx 20rpx;
		color: #ffffff;
		
	}
	.hang>text{
		margin-left: 10rpx;
	}
	
	.money_a {
		color: #ffffff;
		font-size: 32rpx;
		font-family: iconfont;
		margin-right: 10rpx;
	}
	
	.money_a>image{
		width: 30rpx;
		height: 30rpx;
		margin: 0 10rpx;
	}
</style>